<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>$Title$</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>

<div id="app" class="container">
    <form class="form-inline bg-danger" role="form">
        查询条件：
        <div class="form-group">
            <label class="sr-only" for="username">用户名称</label>
            <input type="text" class="form-control" id="username" placeholder="用户名称">
        </div>
        <div class="form-group">
            <label class="sr-only" for="userage">用户年龄</label>
            <input type="text" class="form-control" id="userage" placeholder="用户年龄">
        </div>
        <button type="button" id="findUser" class="btn btn-success">查询用户</button>
        <button type="button" id="addUserBtn" class="btn btn-danger">增加用户</button>
    </form>

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
            	<td>序号</td>
                <td>用户</td>
                <td>电话</td>
                <td>角色</td>                
                <td>年龄</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.password}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.email}}</td>
                <td><a href='#'>编辑</a>|<a href='#'>删除</a></td>
                
            </tr>
            </tbody>
            <tr>
                <td colspan="3"><div id="pagenav"></div></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            result:[]
        }
    });
    var getAllUserTotle=function (curr) {
        $.ajax({
            url:'/usercontroller/getAllUser.do',
            type:'POST',
            data:{
                name:$("#username").val(),
                curPage:curr||1,
                perTotle:2

            },
            success:function (data) {
               vm.result = data.page;
               laypage({
                   cont:'pagenav',
                   pages:data.totle,//这个是总页数
                   first:'第一页',
                   last:'最后一页',
                   curr:curr || 1,
                   jump:function(obj,first){
                       if(!first){
                           getAllUserTotle(obj.curr);
                       }
                   }

               })
            }
        });
    };
    getAllUserTotle();

    $("#addUserBtn").click(function () {
             layer.open({
                         type:2,
                         title:'添加用户',
                         shadeClose:true,
                         area:[ '900px', '600px' ],
                         fix:false,
                         maxmin:true,
                         content:'/addUser.html',
                         end:function() {
                             getAllUserTotle();

                        }
             })
    });
</script>

